<template>
  <view class="c-tabs">
    <slot></slot>
  </view>
</template>
<script setup>
import { anyType } from '@/hooks';
import { tabsKey } from '@/constants';
import { useUnload } from '@tarojs/taro';
import { provide, watch } from 'vue';

const modelVaule = defineModel(anyType());

const emit = defineEmits(['change']);
const unwatch = watch(modelVaule, () => {
  emit('change', modelVaule.value);
});
provide(tabsKey, modelVaule);

useUnload(() => {
  unwatch();
});
</script>
<style>
.c-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 30px;
  background-color: var(--color-caption);
}
</style>
